<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:30:32
 * @LastEditTime: 2021-04-30 15:41:30
 * @LastEditors: coocase
 * @Description: 个人信息
 * @FilePath: \git\dami\src\pages\account\account.vue
-->
<template>

    <Row class="wrap">
        <div class="line"></div>
        <Col span="6">

            <Menu active-name='orderManager'  @on-select="select">

            <MenuGroup title="个人主页">

                </MenuGroup>
            <MenuGroup  title="交易中心" >
                <!-- iview绑定点击事件需要加 .native修饰符 -->
                <MenuItem name="orderManager" >
                    <Icon type="md-document" />
                    订单管理
                </MenuItem>

            </MenuGroup>
            <MenuGroup title="账户中心" >
                <!-- <MenuItem name="accountManage" @click.native="changeMenu">
                    <Icon type="md-heart" />
                    个人信息
                </MenuItem> -->
                 <MenuItem name="accountManage" >
                    <Icon type="md-heart" />
                    个人信息
                </MenuItem>
                <!-- on-select 会自动传递name值 -->
                <!-- <MenuItem name="test">
                    <Icon type="md-heart" />
                    test
                </MenuItem> -->

            </MenuGroup>
            </Menu>
        </Col>
        <Col span="18">
        <div></div>
        <!-- 这里如果不加 v-if的话，由于获取数据是异步的，所以currentInfo(currentMenu)一开始会是空值，会因为传递空值而无法渲染 -->
            <component :is="currentMenu" :datas="currentInfo(currentMenu)" v-if="judge(currentMenu)"></component>
        </Col>
    </Row>
</template>

<script>
import Users from './users';
import OrderManager from './orderManager';
import AccountManage from './accountManage';

export default {

    name:'Account',
    data(){
        return {
            menu:['orderManager','accountManage','users'],
            //默认是accountManage的话，第一次渲染不出账户信息数据 因为异步里才获得数据，即渲染好挂载后才获得数据 就会报错
            currentMenu:'orderManager',
            info: '',
            usersData:[],
            ordersData:[]
        }
    },
    components:{
        Users,
        OrderManager,
        AccountManage
    },
    watch:{

    },
    methods:{
        //获取账户信息
        getAccountInfo:function(){
            this.$http.getRequest({
               api:'account',
               data:{}
           }).then((res) => {
               this.info = res;
               if(this.GLOBAL.hasLogin){
                   this.info.name = this.GLOBAL.userName.toString();//这里不转换的话，就会是array
                }else{
                    this.GLOBAL.userName = res.userName
                }
            //  console.log(this.GLOBAL);
           }).catch((err) => {
               console.log(err)
           });
        },
    //获取用户人列表信息
        getUsers:function(){
            this.$http.getRequest({
               api:'users',
               data:{}
           }).then((res) => {
               this.usersData = JSON.parse(JSON.stringify(res.pages))
           }).catch((err) => {
               console.log(err)
           });
        },
        // 获取订单信息
        getOrders:function(){
            this.$http.getRequest({
               api:'orders',
               data:{}
           }).then((res) => {
               this.ordersData = JSON.parse(JSON.stringify(res.pages))
           }).catch((err) => {
               console.log(err)
           });
        },
        // 获取当前页面名称判断，并返回相应的数据
        currentInfo:function (cur){
            if(cur=='accountManage'){
                return this.info;
            }else if(cur=='users'){
                return this.usersData;
            }else{
                return this.ordersData;
            }
        },
        judge:function (cur) {
            if(cur=='accountManage'&&this.info){
                return true;
            }else if(cur=='users'&&this.usersData.length){

                return true;
            }else if(cur=='orderManager'&&this.ordersData.length){
                return true;
            }else{
                return false;
            }
        },
        // changeMenu:function(event){
        //     var inner=[' 订单管理',' 个人信息',' 常用购票人'];//iview标签的innerTest自带一个空格符
        //     // console.log(inner);
        //     for(var i = 0;i<inner.length;i++){
        //         // console.log('test');
        //         // console.log(inner[i]);
        //         // console.log(event.target.innerText);
        //         //iview标签渲染后没有name属性
        //         if(event.target.innerText==inner[i]){
        //             console.log(i);
        //             // console.log('test1');
        //             this.currentMenu = this.menu[i];
        //             return i;
        //         }
        //     }

            // console.log(event.target.innerText)
            // https://www.w3school.com.cn/jsref/dom_obj_all.asp    HTML DOM Element 对象
        // },
        //获取选中的菜单名
        select:function(name){
            this.currentMenu = name
            // console.log(name+'test');
        },

    },
    created:function(){
        this.getAccountInfo();
        this.getUsers();
        this.getOrders();
    }
}
</script>

<style scoped>
    .wrap{
        width: 1200px;
        margin: 50px auto;
        /* margin: 50px; */

    }
    .title{
        color: black  !important;
        font-size: 16px;
    }
    .line{
        position: absolute;
        top: 200px;
        overflow: visible;
        /* content: ""; */
        /* height: 2px; */
        width: 98vw;
        color: #ff3c18;
        border-top: 2px solid #ff3c18;
    }
</style>
